import './public/index'
import { base } from './data/url'
import { r_login } from './data/request'

/* 登录 */
login()
function login() {
  let $form = $('#login-form'),
      valid_form

  $.validator.setDefaults({ // 只能放在validate规则配置之前
    // 提交事件
    submitHandler: () => {
      console.log('submit!')

      let obj_form =  $form.serializeObject(),
          loading_modal

      loading_modal = layer.msg('提交中...', {
        icon: 16,
        shade: .6,
        time: 0
      })

      $.ajax({
        url: base + r_login,
        type: 'POST',
        cache: false,
        data: obj_form
      })
      .done(function(res) {
        console.log(res)

        layer.msg('成功', {
          icon: 6
        })

      })
      .fail(function(res) {
        console.log(res)

        layer.msg('失败', {
          icon: 5
        })

      })
      .always(function(res) {

        layer.close(loading_modal)
      })
    }
  })

  valid_form = $form.validate({
    debug: true,
    invalidHandler: function(form, validator) {

      layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        time: 3000,
        shadeClose: true,
        skin: 'ui-modal-alert',
        content: `<div class="ui-modal-alert-content">
                    <a class="ui-modal-alert-close"><i class="icon iconfont icon-roundclose"></i></a>
                    <div class="ui-modal-alert-info">
                      ${ validator.errorList[0].message }
                    </div>
                    <div class="ui-modal-alert-action">
                      <a href="#">确认</a>
                    </div>
                  </div>`
      })

      return false
    },
    errorPlacement: function(error, element) {
    },
    rules: {
      user: {
        required: true
      },
      password: {
        required: true
      },
      valid: {
        required: true
      }
    },
    messages: {
      user: {
        required: '请输入用户名'
      },
      password: {
        required: '请输入密码'
      },
      valid: {
        required: '请输入验证码'
      }
    }
  })
}
/* /登录 */

/* 注册 */
reg()
function reg() {

  let $form = $('#reg-form'),
      swiper,
      valid_form

  $.validator.setDefaults({ // 只能放在validate规则配置之前
    // 提交事件
    submitHandler: () => {
      console.log('submit!')

      let obj_form =  $form.serializeObject(),
          loading_modal

      loading_modal = layer.msg('提交中...', {
        icon: 16,
        shade: .6,
        time: 0
      })

      $.ajax({
        url: base + r_login,
        type: 'POST',
        cache: false,
        data: obj_form
      })
      .done(function(res) {
        console.log(res)

        layer.msg('成功', {
          icon: 6
        })

      })
      .fail(function(res) {
        console.log(res)

        layer.msg('失败', {
          icon: 5
        })

      })
      .always(function(res) {

        layer.close(loading_modal)
      })
    }
  })

  valid_form = $form.validate({
    debug: true,
    invalidHandler: function(form, validator) {

      layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        time: 3000,
        shadeClose: true,
        skin: 'ui-modal-alert',
        content: `<div class="ui-modal-alert-content">
                    <a class="ui-modal-alert-close"><i class="icon iconfont icon-roundclose"></i></a>
                    <div class="ui-modal-alert-info">
                      ${ validator.errorList[0].message }
                    </div>
                    <div class="ui-modal-alert-action">
                      <a href="#">确认</a>
                    </div>
                  </div>`
      })

      return false
    },
    errorPlacement: function(error, element) {
    },
    rules: {
      user: {
        required: true
      },
      password: {
        required: true
      },
      rePassword: {
        required: true,
        equalTo: '#rePassword'
      },
      valid: {
        required: true
      },
      agree: {
        required: true
      }
    },
    messages: {
      user: {
        required: '请输入用户名'
      },
      password: {
        required: '请输入密码'
      },
      rePassword: {
        required: '请输入密码',
        equalTo: '密码不一致'
      },
      valid: {
        required: '请输入验证码'
      },
      agree: {
        required: '请确认合同'
      }
    }
  })

  // 注册轮播图
  function regSwiper() {
    swiper = new Swiper ('#regModal-swiper', {
      autoplayDisableOnInteraction: false,
      autoplay: 2000,
      paginationClickable: true,
      loop: true,
      pagination: '.regModal-swiper-pagination',
    })
  }
  

  $('#regModal').on('shown.bs.modal', function (e) {
    regSwiper()
  })
}
/* /注册 */

/* 轮播图 */
focus()
function focus() {
  let focus,
      $focus         = $('.focus'),
      pagination_arr = $focus.data('pagination') ? $('.focus').data('pagination').split('|') : []

  focus = new Swiper ('#focus', {
    autoplay: 3000,
    autoplayDisableOnInteraction: false,
    pagination: '#focus-pagination',
    paginationClickable: true,
    paginationType : 'custom',
    paginationCustomRender: function (swiper, current, total) {

      let $pagination    = '',
          i              = 0

      for (; i < total; i++) {
        $pagination += `<span data-index=${ i } class="focus-pagination ${ i === current - 1 ? 'active' : '' }">${ pagination_arr[i] ? pagination_arr[i] : '' }</span>`
      }

      return $pagination
    }
  })

  $(document).on('click', '.focus-pagination', (e) => {
    e.preventDefault()

    let $el   = $(e.target),
        index = $el.data('index') ? $el.data('index') : 0

    focus.slideTo(index)
  })
}
/* /轮播图 */

/* 公告 */
notice()
function notice() {
  let speed        =50; 
  let scroll_begin = document.getElementById("notice-start"); 
  let scroll_end   = document.getElementById("notice-end"); 
  let scroll_div   = document.getElementById("notice-value"); 
  let MyMar        =setInterval(Marquee,speed); 

  scroll_end.innerHTML = scroll_begin.innerHTML; 
  
  function Marquee(){ 
    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) {scroll_div.scrollLeft-=scroll_begin.offsetWidth; }
    else{ scroll_div.scrollLeft++;}
  } 
  
  scroll_div.onmouseover = function() {clearInterval(MyMar);} 
  scroll_div.onmouseout  = function() {MyMar=setInterval(Marquee,speed);} 
}
/* /公告 */

/* 奖池 */
jackpot()
function jackpot() {
  let jackpot,
      $boundNumber1 = $('#bound-number-1'),
      $boundNumber2 = $('#bound-number-2'),
      boundNumber1_val = $boundNumber1.text().split(',').join('') - 0,
      boundNumber2_val = $boundNumber2.text().split(',').join('') - 0,
      boundNumber1,
      boundNumber2,
      option

  jackpot = new Swiper ('#jackpot-winners', {
    direction: 'vertical',
    autoplayDisableOnInteraction: false,
    autoplay: 2000,
    loop: true,
    nextButton: '.jackpot-winners-prev',
    prevButton: '.jackpot-winners-next'
  })

  option = {
    useEasing : true, 
    useGrouping : true, 
    formate : true,
    separator : ',', 
    decimal : '.', 
  }


  boundNumber1 = new CountUp($boundNumber1[0], 309485698, 919457295, 2, 600000000, option)

  boundNumber2 = new CountUp($boundNumber2[0], 514485518, 919457295, 2, 600000000, option)

  boundNumber1.start()
  boundNumber2.start()
}
/* /奖池 */

/* 游戏tab */
game()
function game() {
  $(document).on('click', '.game-tab-item a', (e) => {
    e.preventDefault()

    let $el    = $(e.target).parents('.game-tab-item'),
        index  = $el.index(),
        $panel = $('.game-content-item')

    $el
      .addClass('active')
      .siblings()
      .removeClass('active')
    
    $panel
      .eq(index)
      .addClass('active')
      .siblings()
      .removeClass('active')

  })
}
/* /游戏tab */